<template>
  <div class="p16 flex-column-null-between container" style="width: 100%;">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline" size="small">
      <el-form-item label="流程名称">
        <el-input v-model="queryParams.keyword" placeholder="流程名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTaskTodo">查询</el-button>
      </el-form-item>
    </el-form>

    <div  style="height: calc(100vh - 270px)">
      <el-table
          :data="tableData"
          size="small"
          border
          :row-style="{height:'0'}"
          height="calc(100vh - 300px)"
          v-loading="loading">
        <el-table-column
            v-for="(item,index) in fields"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :min-width="item.width"
            :fixed="item.fixed"
        >

          <template v-if="item.prop === 'operation'" scope="scope">
            <el-button @click="handleTask(scope.row)" type="text" size="small">处理</el-button>
            <el-button @click="transferTask(scope.row)" type="text" size="small">转办</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="page-container">
        <el-pagination
            :page-sizes="[10, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="nowPage"
            :page-size="10"
            layout="sizes,total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import {queryTaskTodo,transferTask} from '@/api/workflowTask'
import {getUser} from "@/api/user";
export default {
  components:{
  },
  data() {
    return {
      user:{},
      total: 0,
      loading: false,
      nowPage:1,
      queryParams:{
        keyword:"",
        status:"",
        system:"",
        module:"",
        account:"",
        pageNum:1,
        pageSize:10,
      },
      fields:[
        {
          label:"流程名称",
          prop:"processName",
          width:150
        },{
          label:"发起者",
          prop:"starterName",
          width:120
        },{
          label:"发起时间",
          prop:"startTime",
          width:150
        },{
          label:"当前步骤",
          prop:"nodeName",
          width:150
        },{
          label:"任务状态",
          prop:"statusName",
          width:120
        },{
          label:"任务到达日期",
          prop:"receiveTime",
          width:150
        },{
          label:"任务处理人",
          prop:"actorName",
          width:150
        },{
          label:"操作",
          prop:"operation",
          width:200,
          fixed: "right",
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getNowUser();
  },
  methods: {
    async getNowUser(){
      let ret =  await getUser();
      this.user = ret.data.user;
      this.getTaskTodo();
    },

    async getTaskTodo(){
      this.loading = true;
      this.queryParams.account = this.user.userAccount;
      let ret = await queryTaskTodo(this.queryParams);
      let content = ret.data;
      this.total = content.total;
      this.tableData = content.list;
      this.loading = false;
    },
    handleTask(row){
      let routeData=this.$router.resolve({ path: row.url, query: {"processId":row.processId,"processInstanceId":row.processInstanceId,"taskId":row.taskId,"operateType":"detail"} });
      window.open(routeData.href, '_blank')
    },
    transferTask(row){

    },
    handleSizeChange(val) {
      this.queryParams.limit = val;
      this.getTaskTodo();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getTaskTodo();
    },


  },

}
</script>


<style src="../../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
.search-item{
  float: left;
  margin: 0 20px 20px 0;
  span{
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}
.workProcessClass{
  height: 500px;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
}
</style>
